<template>
<div class="header--panel">
    <div v-for="(col,ins) in column" :key="ins" class="p--item">
        <div class="i--title">
            <span>{{ col.title }}</span>
        </div>
        <div class="i--value">
            <span class="v--text">
                {{ col.value }}
            </span>
            <span v-if="col.unit" class="v--unit">
                {{ col.unit }}
            </span>
        </div>
    </div>
</div>
</template>

<script>
import {getPanelInfo} from '@/api/dbdvehicle'

export default {
    name:'panel',

    data:() => ({
        info:{}
    }),
    computed:{
        column(){
            const info = this.info;
            const keys = [['count','在线车辆数/车辆总数'],['alarmCount','报警车辆数'],['mileage','今日累计里程 （KM）'],['fuel','今日累计油耗 （L）'],['hours',"今日累计工时（小时）"]]
            const d = keys.map(ks => ({
                title:ks[1],
                value:info[ks[0]] || 0
            }))
            return d
        }
    },
    methods:{
        async getPanelInfo(){
            try{
                const res = await getPanelInfo();
                //
                // console.log(res)
                const d = res.data.result
                // console.log(d)
                this.info ={ ...d,count:`${d.onlineCount}/${d.vehicleCount}`};
            }catch(e){
                console.log(e)
            }
        } ,
        
        
        apiRefresh(){
            this.getPanelInfo();
        }
    },
    created(){
        //
        this.getPanelInfo();
    }
}
</script>

<style scoped lang="scss">
    .header--panel{
        display:flex;
        padding:0 24px;
        align-items: center;
        justify-content: space-between;
        margin-bottom:24px;
        .p--item{
            border-radius: 6px;
            padding:10px;
            background:skyblue;
            min-width:200px;
            color:#666;
            .i--title{
                font-weight: bold;
                color:#333;
            }
            .i--value{
                margin-top:1em;
                text-align: center;
            }
        }
        
    }
</style>